<template>
    <div class="filter-container">
        <!-- 横向滚动筛选栏 -->
        <div class="horizontal-scroll-filter">
            <div v-for="(condition, index) in conditions" :key="index" class="scroll-condition">
                <!-- 条件间逻辑关系选择 (非第一个条件显示) -->
                <el-select v-if="index > 0" v-model="condition.logic" size="mini"
                    style="width: 80px; margin-right: 5px">
                    <el-option label="AND" value="and" />
                    <el-option label="OR" value="or" />
                </el-select>

                <!-- 字段选择 -->
                <el-select v-model="condition.field" placeholder="字段" size="mini" style="width: 120px" filterable>
                    <el-option v-for="field in availableFields" :key="field.prop" :label="field.label"
                        :value="field.prop" />
                </el-select>

                <!-- 运算符选择 -->
                <el-select v-model="condition.operator" size="mini" style="width: 80px; margin: 0 5px">
                    <el-option label=">" value="gt" />
                    <el-option label=">=" value="gte" />
                    <el-option label="=" value="eq" />
                    <el-option label="<=" value="lte" />
                    <el-option label="<" value="lt" />
                    <el-option label="≠" value="ne" />
                </el-select>

                <!-- 值输入 -->
                <el-input-number v-model="condition.value" controls-position="right" size="mini" style="width: 100px"
                    @keyup.enter="handleFilter"></el-input-number>

                <!-- 删除按钮 -->
                <svg-icon icon-class="del" width="16" height="16" style="margin-left: 5px; cursor: pointer;"
                    @click="removeCondition(index)" />
            </div>

            <!-- 添加条件按钮 -->
            <el-button size="mini" style="margin-right: 5px;" @click="addCondition">添加条件</el-button>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
            <el-button class="jtyj-btn-cancel" size="mini" @click="resetFilter">重置</el-button>
            <el-button class="jtyj-btn-primary" size="mini" @click="handleFilter" :disabled="conditions.length === 0">
                筛选 ({{ filteredCount }})
            </el-button>

        </div>
    </div>
</template>

<script>
export default {
    name: "NumberConditional",
    data() {
        return {
            conditions: [], // 动态条件数组
            filteredData: [],
        }
    },
    props: {
        tableData: {
            type: Array,
            default: () => []
        },
        availableFields: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        // 当前筛选结果计数
        filteredCount() {
            return this.filteredData.length
        }
    },
    mounted() {
        // 初始化时添加一个空条件
        this.addCondition()
        // 初始显示全部数据
        this.resetFilter()
    },
    methods: {
        // 添加新条件
        addCondition() {
            this.conditions.push({
                logic: 'and', // 默认AND逻辑
                field: '',
                operator: 'gt',
                value: ''
            })

            // 添加后自动滚动到最右
            this.$nextTick(() => {
                const container = document.querySelector('.horizontal-scroll-filter')
                container.scrollLeft = container.scrollWidth
            })
        },

        // 删除条件
        removeCondition(index) {
            this.conditions.splice(index, 1)
            this.handleFilter()
        },

        // 执行筛选
        handleFilter() {
            if (this.conditions.length === 0) {
                this.filteredData = [...this.tableData]
            } else {
                this.filteredData = this.tableData.filter(item => {
                    // 第一个条件必须满足
                    let result = this.checkCondition(item, this.conditions[0])

                    // 从第二个条件开始应用逻辑关系
                    for (let i = 1; i < this.conditions.length; i++) {
                        const condition = this.conditions[i]
                        const currentResult = this.checkCondition(item, condition)

                        result = condition.logic === 'and'
                            ? result && currentResult
                            : result || currentResult
                    }

                    return result
                })
            }
            // 触发事件
            this.$emit('update', this.filteredData)
        },

        // 检查单个条件
        checkCondition(row, condition) {
            if (!condition.field) return true

            // 处理普通字段
            if (['round', 'total'].includes(condition.field)) {
                return this.compareValues(
                    Number(row[condition.field]),
                    condition.operator,
                    Number(condition.value)
                )
            }

            // 处理指标分数
            const indexItem = row.indexList?.find(item => item.indexName === condition.field)
            if (!indexItem) return false

            return this.compareValues(
                Number(indexItem.indexScore),
                condition.operator,
                Number(condition.value)
            )
        },

        // 通用值比较
        compareValues(val, operator, target) {
            const numVal = Number(val)
            const numTarget = Number(target)

            switch (operator) {
                case 'gt': return numVal > numTarget
                case 'gte': return numVal >= numTarget
                case 'eq': return numVal === numTarget
                case 'lte': return numVal <= numTarget
                case 'lt': return numVal < numTarget
                case 'ne': return numVal !== numTarget
                default: return true
            }
        },

        // 重置筛选
        resetFilter() {
            this.conditions = []
            this.filteredData = [...this.tableData]
            // 触发事件
            this.$emit('update', this.filteredData)
        }
    },

}
</script>

<style lang="scss" scoped>
.filter-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    justify-content: space-between;

    /* 横向滚动容器 */
    .horizontal-scroll-filter {
        width: calc(100% - 150px);
        overflow-x: auto;
        height: 50px;
        display: flex;
        align-items: flex-start;

        /* 单个条件样式 */
        .scroll-condition {
            display: inline-flex;
            align-items: center;
            border-radius: 4px;
            flex-shrink: 0;
            margin-right: 10px;

        }
    }

    /* 操作按钮容器 */
    .action-buttons {
        margin-left: 20px;
        height: 50px;
        width: 150px;
        display: flex;
        align-items: flex-start;
    }
}
</style>